<script setup>
import {ref} from 'vue'
import VModelCom from './components/vmodelCom.vue'
const msg = ref('123')
const count = ref(1)
</script>

<template>
  <div>
    <!-- 默认情况下
    v-model 在 vue3 自定义组件中
    相当于两个操作的语法糖
    :modelValue 的绑定 (:value 在vue2)
    @update:modelValue 监听 (@input 在 vue2) -->
    <div>{{ msg }}</div>
    <div>父组件{{count}}</div>
    <VModelCom :modelValue="msg" @update:modelValue="msg = $event"/>
    <!-- vue2 自定义数据双向绑定写法 -->
    <!-- <VModelCom v-model="msg" :count.sync="count"/> -->
    <!-- v-model:数据名 相当于以下两个的结合语法糖
    :count + @update:count
    -->
    <VModelCom :count="count" @update:count="count = $event" />
    <VModelCom v-model:count="count"/>
  </div>
</template>